
<template>
    <div class="edit-box" teleport="body">
        <h1 class="txt1">修改管理员信息</h1>
        <el-form :model="admin" label-width="120px" >
            <el-form-item label="编号：" style="font-weight: bold;">
                <span>{{ admin.adminid }}</span>
            </el-form-item>

            <el-form-item label="姓名：" style="font-weight: bold;">
                <span>{{ admin.adminname }}</span>
            </el-form-item>

            <el-form-item label="密码：" style="font-weight: bold;">
                <el-input type="password" v-model="admin.password" />
            </el-form-item>

            <el-form-item label="角色：" style="font-weight: bold;">
                <el-radio-group v-model="admin.role">
                    <el-radio :label="1">超级管理员</el-radio>
                    <el-radio :label="2">普通管理员</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="saveFn">修改</el-button>
                <el-button type="primary" @click="cancelFn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    
<script setup lang="ts">

import { ElMessage } from 'element-plus';
import { reactive, watch } from 'vue';
import service from '../../../untils/service';

// 声明属性
const props = defineProps<{
    adminname: string
}>()

// 声明事件
const emit = defineEmits<{
    (e: "hide"): void,
    (e:"updatesuccess"):void
}>();

interface IAdmin {
    "adminname": string,
    "password": string,
    "role": number,//1:表示超级管理员，2：普通管理员
    "adminid": string,
    "checkedKeys": string[]
}

// 当前管理员的数据
const admin = reactive<IAdmin>({
    "adminid": '',
    "adminname": "",
    "password": "",
    "role": 1,
    "checkedKeys": []
})

// 取消
const cancelFn = () => {
    // 触发隐藏事件
    emit("hide");
}

// 获取管理员的信息：根据adminname进行获取
const getAdminDetail = () => {
    service({
        url: "/admin/detail",
        params: {
            adminname: props.adminname
        }
    }).then(res => {
        if (res.data.code === "200") {
            admin.adminid = res.data.data[0].adminid;
            admin.adminname = res.data.data[0].adminname;
            admin.role = res.data.data[0].role;
            admin.checkedKeys = res.data.data[0].checkedKeys;
        }
    })
}

watch(props, () => {
    getAdminDetail();
    admin.password="";
}, {
    deep: true
})

const saveFn = () => {
    service({
        url: "/admin/update",
        method: "post",
        data: {
            adminname: admin.adminname,
            password: admin.password,
            role: admin.role,
            checkedKeys: admin.checkedKeys
        }
    })
    .then(res=>{
        if(res.data.code==="200"){
            ElMessage({
                message:"修改成功！",
                type:"success"
            })
            emit("hide");//关掉自己
            emit("updatesuccess");
        }
    })
}

</script>
    
<style scoped>
.edit-box {
    width: 400px;
    height: 300px;
    border: 1px solid #f9f1f1;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(229, 229, 253,0.9);
    z-index: 999;
    border-radius: 20px;
}

.txt1 {
    text-align: center;
}

</style>
